﻿@page "/docs/components/close-button"

<Seo Canonical="/docs/components/close-button" Title="Blazorise CloseButton component" Description="Learn to use and work with the Blazorise CloseButton component, a simple button that highlights to the user that a part of the current UI can be dismissed." />

<DocsPageTitle Path="Components/Close Button">
    Blazorise CloseButton component
</DocsPageTitle>

<DocsPageLead>
    A generic close button for dismissing content like modals and alerts.
</DocsPageLead>

<DocsPageParagraph>
    The <Code Tag>CloseButton</Code> is a simple button that highlights to the user that a part of the current UI can be dismissed such as an <Code>Alert</Code> or a <Code>Modal</Code>.
</DocsPageParagraph>

<DocsPageParagraph>
    When used in an <Code>Alert</Code> or a <Code>Modal</Code> the component will be closed automatically. If not inside one of these components the
    <Code>Clicked</Code> EventCallback must be set for it to be useful.
</DocsPageParagraph>

<DocsPageSection>
    <DocsPageSectionHeader Title="Manual close">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <ManualCloseExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ManualCloseExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Auto close">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <AutoCloseExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="AutoCloseExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="With other components">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <WithOtherComponentsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="WithOtherComponentsExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(CloseButton)]" />